<template>
  <div class="rejectreason">
    <div class="rejectreason_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div>
            <el-input
              v-model="addipt"
              placeholder="请输入新增拒绝内容"
              style="width:300px"
            ></el-input>
            <el-button type="primary" @click="doadd">新 增</el-button>
          </div>
          <div class="taber">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部商品" name="1"> -->
            <div class="promotiontable">
              <div>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  ref="singleTable"
                  @current-change="handleCurrentChange2"
                  highlight-current-row
                  @row-dblclick="editchange"
                >
                  <el-table-column prop="id" label="ID">
                    <template slot-scope="scope">
                      <div>{{ scope.row.id }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="err_reason" label="拒绝理由">
                    <template slot-scope="scope">
                      <p style="height:40px;line-height: 40px;">
                        {{ scope.row.err_reason }}
                      </p>
                      <el-input
                        style="display:none"
                        v-model="scope.row.err_reason"
                        placeholder="请输入拒绝内容"
                        v-focus="focusStatus"
                        @blur="closeipt(scope.row, $event)"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="create_at" label="创建时间">
                    <template slot-scope="scope">
                      <div style="text-align:center">
                        {{ scope.row.create_at }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="update_at" label="修改时间">
                    <template slot-scope="scope">
                      <div style="text-align:center">
                        {{ scope.row.update_at }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="action" label="操作">
                    <template slot-scope="scope">
                      <div>
                        <el-button
                          @click.native.prevent="edit(scope.row, $event)"
                          type="text"
                          size="small"
                          style="margin-right:10px"
                        >
                          编辑
                        </el-button>
                        <el-popconfirm
                          title="确定删除吗？"
                          @onConfirm="delReason(scope.row.id)"
                        >
                          <el-button slot="reference" type="text" size="small">
                            删除
                          </el-button>
                        </el-popconfirm>
                      </div>
                      <!-- <div style="display:none">
                        <el-button
                          @click.native.prevent="edit(scope.row, $event)"
                          type="text"
                          size="small"
                        >
                          保存
                        </el-button>
                        <el-button
                          @click.native.prevent="del(scope.row)"
                          type="text"
                          size="small"
                        >
                          取消
                        </el-button>
                      </div> -->
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="text-align: right;">
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-size="30"
                :pager-count="5"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
            <!-- </el-tab-pane> -->
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getReasonList,
  addReason,
  editReason,
  delReason
} from "@/api/userinfo/userinfo";

export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },

  directives: {
    focus: {
      update(el, { value }) {
        if (value) {
          console.log(el, value);
          const dom = el.children[0];
          dom.focus();
        }
      }
    }
  },
  name: "rejectreason",
  data() {
    return {
      oldval: "",
      addipt: "",
      focusStatus: false,
      iptshow: true,
      type: "",
      fields: "",
      count: 0,
      currentPage: 1,
      loading: false,
      // activeName: "1",
      tableData: [],
      options: [
        {
          value: "1",
          label: "今日上单商品数"
        },
        {
          value: "2",
          label: "今日被申请商品数"
        },
        {
          value: "3",
          label: "上单商品总数"
        },
        {
          value: "4",
          label: "被申请商品总数"
        },
        {
          value: "5",
          label: " 今日商品销量数"
        },
        {
          value: "6",
          label: " 商品销量总数"
        }
      ]
    };
  },
  computed: {},
  created() {
    this.getReasonList(1, 15);
  },
  mounted() {},
  methods: {
    //删除
    delReason(record_id) {
      delReason({
        record_id: record_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("删除返回", res);
            this.$message.success("删除成功!");
            this.getReasonList(1, 15);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //修改理由
    editReason(record_id, reason) {
      editReason({
        record_id: record_id,
        reason: reason
      })
        .then(res => {
          if (res.code == 200) {
            console.log("返回", res);
            this.$message.success("修改成功!");
            this.getReasonList(1, 15);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 新增
    doadd() {
      if (this.addipt !== "") {
        console.log(this.addipt);
        //新增
        addReason({
          reason: this.addipt
        })
          .then(res => {
            if (res.code == 200) {
              console.log("新增返回", res);
              this.$message.success("新增成功!");
              this.getReasonList(1, 15);
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    closeipt(row, e) {
      console.log(this.oldval, row, e);
      if (e.target.tagName == "INPUT") {
        // console.log("p");
        var targetp = e.target.parentNode.parentNode.children[0];
        var targetipt = e.target.parentNode.parentNode.children[1];
        // let targetbtn = e.path[4].children[4].children[0].children[0]; //编辑
        // let targetbtn2 = e.path[4].children[4].children[0].children[1]; //保存
        // console.log("targetbtn", targetbtn, targetbtn2);
        // targetbtn.style.display = "block";
        // targetbtn2.style.display = "none";
        targetp.style.display = "block";
        targetipt.style.display = "none";
        this.focusStatus = false;
        if (this.oldval !== row.err_reason) {
          this.editReason(row.id, row.err_reason);
        }
      }
    },
    editchange(row, column, e) {
      console.log(row, column, e);
      this.oldval = row.err_reason;
      if (e.target.tagName == "P") {
        // console.log("p");
        // this.iptshow = false;
        var targetp = e.target.parentNode.children[0];
        var targetipt = e.target.parentNode.children[1];
        // var targetbtn = e.path[3].children[4].children[0].children[0]; //编辑
        // var targetbtn2 = e.path[3].children[4].children[0].children[1]; //保存
        // // console.log("targetbtn", targetbtn, targetbtn2);
        // targetbtn.style.display = "none";
        // targetbtn2.style.display = "block";
        targetp.style.display = "none";
        targetipt.style.display = "block";
        this.$nextTick(() => {
          this.focusStatus = true;
        });
      }
    },
    edit(row, e) {
      console.log(row, e);
      this.oldval = row.err_reason;
      if (e.target.tagName == "SPAN") {
        this.iptshow = false;
        let targetp = e.path[5].children[1].children[0].childNodes[0];
        let targetipt = e.path[5].children[1].children[0].childNodes[1];
        // let targetbtn = e.path[3].children[0]; //编辑
        // let targetbtn2 = e.path[3].children[1]; //保存
        // // console.log("targetbtn", targetbtn, targetbtn2);
        // targetbtn.style.display = "none";
        // targetbtn2.style.display = "block";
        targetp.style.display = "none";
        targetipt.style.display = "block";
        // console.log("targetp", targetp, "targetipt", targetipt);
        this.$nextTick(() => {
          this.focusStatus = true;
        });
      }
      if (e.target.tagName == "BUTTON") {
        this.iptshow = false;
        let targetp1 = e.path[4].children[1].children[0].childNodes[0];
        let targetipt1 = e.path[4].children[1].children[0].childNodes[1];
        // let targetbtn = e.path[2].children[0]; //编辑
        // let targetbtn2 = e.path[2].children[1]; //保存
        // // console.log("targetbtn", targetbtn, targetbtn2);
        // targetbtn.style.display = "none";
        // targetbtn2.style.display = "block";
        targetp1.style.display = "none";
        targetipt1.style.display = "block";
        // console.log("targetp", targetp1, "targetipt", targetipt1);
        this.$nextTick(() => {
          this.focusStatus = true;
        });
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getReasonList(this.currentPage, 15);
    },
    dosearch() {
      this.getReasonList(1, 15);
    },
    getReasonList(page, pagesize) {
      this.loading = true;
      getReasonList({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          console.log("理由列表", res);
          this.count = res.data.count;
          this.tableData = res.data.data;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },

    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange2(val) {
      this.currentRow = val;
    },
    // // 下拉排序选择
    SelectChange(val) {
      console.log(val);
      console.log(this.type);
      this.getReasonList(1, 30, val, this.type);
    },
    // radio选择
    typeChange(val) {
      console.log(val);
      this.getReasonList(1, 30, this.fields, val);
    }
    // 导航栏切换
    // handleClick() {
    //   // this.getUserGoods(1, 15, this.activeName, "");
    //   console.log("导航", this.activeName);
    // }
  }
};
</script>

<style lang="less" scoped>
.rejectreason {
  // width: 970px;
  box-sizing: border-box;
  .rejectreason_main {
    // width: 970px;
    .taber {
      margin-top: 10px;
    }
  }
}
</style>
